<template>
  <div class="titleContent">
    <div class="title title3" data-text="HTML标签">元素</div>
  </div>
  <ul class="site-doc-icon">
    <li @click="onTextClick">
      <i class="iconfont icon-edit"></i>
      <div class="doc-icon-fontclass">
        <div>{{ $t("input") }}</div>
      </div>
    </li>
    <li @click="onTextAreaClick">
      <i class="iconfont icon-code"></i>
      <div class="doc-icon-fontclass">富文本</div>
    </li>
    <li @click="onDatetimeClick">
      <i class="iconfont icon-calendar"></i>
      <!-- <i :class="[`layui-icon layui-icon-date`]"></i> -->
      <div class="doc-icon-fontclass">日期</div>
    </li>
    <li @click="onCheckboxClick">
      <i class="iconfont icon-check-item"></i>
      <div class="doc-icon-fontclass">勾选框</div>
    </li>
    <li @click="onSelectClick">
      <i class="iconfont icon-direction-down-circle"></i>
      <div class="doc-icon-fontclass">下拉选择</div>
    </li>

    <li @click="onFileClick">
      <i class="iconfont icon-file"></i>
      <div class="doc-icon-fontclass">文件</div>
    </li>
    <li @click="onNumberClick">
      <i class="iconfont icon-discount"></i>
      <div class="doc-icon-fontclass">数字</div>
    </li>
    <li @click="onColorClick">
      <i class="iconfont icon-chart-pie"></i>
      <div class="doc-icon-fontclass">颜色</div>
    </li>
  </ul>
  <div class="titleContent">
    <div class="title title3" data-text="HTML标签">布局</div>
  </div>
  <ul class="site-doc-icon">
    <li @click="(event) => onDivClick(event, 2)">
      <i class="iconfont icon-column-horizontal"></i>
      <div class="doc-icon-fontclass">栅格(2)</div>
    </li>
    <li @click="(event) => onDivClick(event, 4)">
      <i class="iconfont icon-column-4"></i>
      <div class="doc-icon-fontclass">栅格(4)</div>
    </li>
  </ul>
</template>

<script>
import i18n from "@/i18n/index";

export default {
  components: {},
  name: "FormElements",
  emits: ["addElementTag"],
  data() {
    return {
      elementIndex: 0,
    };
  },
  methods: {
    $t(key, value) {
      return i18n.global.t(key, value);
    },
    getIndex() {
      return this.elementIndex++;
    },
    addElement(tag) {
      this.$emit("addElementTag", tag);
    },
    onTextClick() {
      let index = this.getIndex();
      const text = {
        type: "text",
        name: "text" + index,
        label: "输入内容",
        placeholder: "请在此输入",
        index: index,
        disabled: "disabled",
        draggable: "true",
      };
      this.addElement(text);
    },
    onTextAreaClick() {
      let index = this.getIndex();
      const text = {
        name: "textarea" + index,
        type: "textarea",
        label: "输入内容",
        placeholder: "",
        index: index,
        disabled: "disabled",
      };
      this.addElement(text);
    },
    onDatetimeClick() {
      let index = this.getIndex();
      const text = {
        name: "datetime" + index,
        type: "datetime-local",
        value: "2020-03-13T18:22",
        label: "日期时间选择",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onCheckboxClick() {
      let index = this.getIndex();
      const text = {
        type: "checkbox",
        name: "checkbox" + index,
        label: "允许",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onSelectClick() {
      let index = this.getIndex();
      const text = {
        type: "select",
        label: "参与人员",
        name: "select" + index,
        options: ["洋洋洋", "Vatican City", "Maldives", "Tuvalu"],
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onFileClick() {
      let index = this.getIndex();
      const text = {
        type: "file",
        name: "file" + index,
        label: "选择文件",
        accept: ".pdf,.doc,.docx,.xml,.md,.csv",
        help: "Select as many documents as you would like.",
        multiple: "true",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onRadioClick() {
      let index = this.getIndex();
      const text = {
        type: "radio",
        name: "radio" + index,
        label: "允许",
        options: ["E-Bike", "E-Scooter", "Electric car", "Walking", "Space tube"],
        help: "How do you like to get around?",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onBtnClick() {
      let index = this.getIndex();
      const text = {
        type: "button",
        label: "按钮",
        name: "button" + index,
        readonly: "readonly",
        index: index,
      };
      this.addElement(text);
    },
    onNumberClick() {
      let index = this.getIndex();
      const text = {
        type: "number",
        label: "数字",
        name: "number" + index,
        value: "0",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onColorClick() {
      let index = this.getIndex();
      const text = {
        type: "color",
        label: "颜色",
        name: "color" + index,
        value: "0",
        disabled: "disabled",
        index: index,
      };
      this.addElement(text);
    },
    onDivClick(e, x) {
      const text = {
        type: "div",
        cx: x,
        attrs: {
          onClick: "$handleClick",
        },
        index: this.getIndex(),
      };
      this.addElement(text);
    },
  },
};
</script>

<style scoped>
@import "@/assets/style/base.css";
@import "@/assets/fonts/iconfont.css";
@import "@/assets/style/title.css";

.icon-svg {
  color: blue;
  width: 20px;
  height: 20px;
}
</style>
